<template>
  <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    status-icon
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
  >
    <h1>叩丁狼商品管理系统</h1>
    <el-form-item label="用户名" prop="username">
      <el-input v-model="ruleForm.username" type="text" placeholder="请输入用户名" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="ruleForm.password" type="password" autocomplete="off" placeholder="请输入密码"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitFn">登录</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { ElForm, ElMessage } from 'element-plus'
import { LoginAPi, queryAdminInfoApi } from '@/request/api'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
type FormInstance = InstanceType<typeof ElForm>
const router = useRouter()
const store = useStore()
// improt.meta.evn 是vite提供的一个数据，会在使用开发服务器的时候是一个不同于 打包后的值
// 打包后会静态的变成一个固定值
// import.meta.env.MODE  如果是 开发环境下， 是 "development"
// console.log(import.meta.env.VITE_BASE_URL)

const ruleForm = reactive({
  username: 'admin',
  password: '123456'
})

// 定义验证 密码的 自定义校验规则
const checkPass = (rule: any, value: string, callback: any) => {
  // rule 是 对应的密码的校验规则对象
  // value 是 密码
  // callback 函数
  // 判断密码是否满足一定的条件
  if (!value.trim()) {
    // 提示用户要输入密码
    return callback(new Error('密码不能空'))
  }
  // 继续判断别的 -- 自由发挥

  // 最后要求，把callback调用一下, 表示通过了验证
  callback()
}

// 表单的校验，只需要使用 ElForm 的rules属性进行控制就行
const rules = reactive({
  // username这个名字要跟 el-form-item 的prop 属性一致
  username: [
    {
      // 必填
      required: true,
      // 对应的提示信息
      message: '请输入用户名',
      // 触发校验的时机  只能是 change / blur
      trigger: 'blur',
    },
    {
      min: 3,
      max: 100,
      message: '用户的长度在3~10之间',
      trigger: 'blur',
    },
  ],
  password: [
    { validator: checkPass, trigger: 'blur' }
  ]
})
// 获取 from的引用 ，具体用法是，给一个 和 组件或者是元素的 ref 属性同名的 响应式数据就行
const ruleFormRef = ref<FormInstance>()
// console.log(ruleFormRef);
const submitFn = async () => {
  // element里面的from表单有一个validate方法，用于使用 rules 对表单进行再次验证
  // 但是要调用这个方法，需要使用from的引用
  const bool = await ruleFormRef.value?.validate()
  if (!bool) return
  const res = await LoginAPi({
    username: ruleForm.username, password: ruleForm.password
  })
  if (res.code === 200) {
    // 登录成功
    // 1. 先把token保存
    // 一般来说，可能服务器那边会要求我们在token前面加一个 开头
    // res.data.token -- token
    // res.data.tokenHead   --  token 前面的头
    localStorage.setItem('token', res.data.tokenHead + res.data.token);
    // 发请求获取当前用户的权限
    const res1 = await queryAdminInfoApi()
    if (res1.code === 200) {
      // 需要把菜单等等权限数据，共享给 home 等其它页面， 放到vuex
      store.commit('setUserMenus', res1.data.menus)
      store.commit('setUserName', res1.data.username)
      // 2. 跳转
      router.push('/home')
    }
  } else {
    ElMessage.error(res.message)
  }
}
</script>
 
<style lang="less" scoped>
.demo-ruleForm {
  width: 400px;
  margin: 200px auto 0;
  box-shadow: 0 0 8px 4px #ccc;
  padding: 20px;
  border-radius: 20px;
  h1 {
    text-align: center;
  }
}
</style>